<template>
    <div style="height: 100%">
        <el-input v-model="filterText" placeholder="输入关键字进行过滤">
        </el-input>
        <div style="height: 900px">
            <el-empty v-if="deptData.length <= 0" description="暂无科室数据"></el-empty>
            <template v-else>
                <el-tree ref="tree" :data="deptData" :expand-on-click-node="false" :filter-node-method="filterNode"
                    :highlight-current=true :props="defaultProps" :show-checkbox="showCheckbox" class="filter-tree"
                    default-expand-all node-key="id" @node-click="nodeClick" :indent="20">
                </el-tree>
            </template>
        </div>
        <!--        </el-card>-->
    </div>
</template>

<script lang="ts" setup>
import { ElTree } from 'element-plus'
import { useUserStoreHook } from "@/store/modules/user"
const useUserStore = useUserStoreHook()
type defaultProps = {
    children: string,
    label: string
}
let filterText = ref("")
let defaultProps = reactive<defaultProps>({
    children: 'children',
    label: 'deptName'
})
// let deptExpand = ref(true)
// 定义ref组件
const tree = ref<InstanceType<typeof ElTree>>()

let props = defineProps({
    showCheckbox: {
        type: Boolean,
        default: false
    },
    deptData: {
        type: [Array],
        default: () => []
    }
})

let emits = defineEmits(["loadingDeptDrawer", "treeClick"])

watch(filterText, (val) => {
    tree.value!.filter(val)
})

watch(props.deptData, (val) => {
    if (val.length > 0) {
        emits("loadingDeptDrawer")
    }
})

/** 获取用户权限科室 */
const getPersonnelAuthorityDept = () => {
    // @ts-ignore
    props.deptData = useUserStore.user.deptList
}
/** 搜索 */
const filterNode = (value) => {
    if (!value) return true
    //@ts-ignore
    return props.deptData.label.indexOf(value) !== -1
}
/** 树节点点击事件 */
const nodeClick = (a, _b, _c) => {
    emits('treeClick', a)
}
// 树权限（展开/折叠）
const handleCheckedTreeExpand = (value, _type) => {
    let treeList: any[] = props.deptData;
    for (let i = 0; i < treeList.length; i++) {
        // @ts-ignore
        tree.store.nodesMap[treeList[i].id].expanded = value;
    }
}

defineExpose({
    getPersonnelAuthorityDept
})
</script>

<script  lang="ts">
export default {
    name: "NavDeptTree"
}
</script>

<style scoped>
.box-card {
    overflow-y: auto
}
</style>
